<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>{json:scada}</title>
  <meta name="description" content="{json:scada}">
  <meta name="author" content="Ricardo Olsen">
  <link rel="apple-touch-icon" href="images/j-s.png" />
  <style>
    @font-face {
      font-family: 'Source Sans Pro';
      font-style: normal;
      font-weight: 400;
      src: local('Source Sans Pro'), local('SourceSansPro-Regular'), url(lib/SourceSansPro-Regular.woff2) format('woff2');
    }

    .blocks {
      display: flex;
      flex: 0 1 min-content;
      position: relative;
      float: left;
      flex-wrap: wrap;
      background-color: rgb(141, 160, 182);
      color: white;
      vertical-align: middle;
      margin: 5px;
      padding: 5px;
      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
      border-radius: 3px;
      transition: 1s;
    }
    h1 {
      text-align: center;
    }
    a {
      text-align: center;
    }
    a:link {
      text-decoration: none;
      color: inherit;
    }

    a:visited {
      text-decoration: none;
      color: inherit;
    }

    a:hover {
      text-decoration: underline;
      color: inherit;
    }

    a:active {
      text-decoration: underline;
      color: inherit;
    }
   body  {
    font-family: Source Sans Pro, helvetica, arial; 
    font-size: 20px; 
    background: linear-gradient(to bottom, #deefff 0%,#98bede 100%);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
   }
   html {
    height: 100%;
   }
  </style>
<script src="util.js"></script>
<script src="images.js"></script>
<script>
  LoadFavicon( Imgs.FAVICON);
</script>
</head>

<body>
  <h1>
    <img height=127 src='images/json-scada.svg' alt='JSON SCADA'>
  </h1>
  <div class='blocks'>
    <a target='_blank' href='about.html'>
      <img height=40 src='images/json-scada.svg'><br>About JSON SCADA
    </a>
  </div>
  <div class='blocks'>
    <a target='_blank' href='display.html?SVGFILE=../svg/kaw2.svg'>
      <img height=40 src='images/tela.png'><br>Display Viewer
    </a>
  </div>
  <div class='blocks'>
    <a target='_blank' href='tabular.html?MODE=ALARMS_VIEWER'>
      <img height=40 src='images/firstaid.svg'><br>Alarms Viewer
    </a>
  </div>
  <div class='blocks'>
    <a target='_blank' href='events.html'>
      <img height=40 src='images/chrono.svg'><br>Events Viewer
    </a>
  </div>
  <div class='blocks'>
    <a target='_blank' href='tabular.html'>
      <img height=40 src='images/tabular.svg'><br>Tabular Viewer
    </a>
  </div>
  <div class='blocks' title='Grafana'>
    <a id="grafana" target='_blank' href="/grafana">
      <img height=40 src='images/grafana.ico'><br>Grafana Dashboards
    </a>
    <script>
      // use this to access Grafana on a distinct port or use some reverse proxy and remove this code
      //(function () {
      // document.getElementById('grafana').href = window.location.protocol + "//" + window.location.hostname + ":3000";
      // })();
    </script>
    </div>

</body>

</html>